<table ng-if="sidebar.current_tab == 'scopes'" id="scopes-list" class="list">
  <thead ng-if="Theme.json">
    <tr>
      <th class="align-begin">Scope Name</th>
      <th class="color-box">FG</th>
      <th class="color-box">BG</th>
      <th class="check-box is_bold">B</th>
      <th class="check-box is_italic">I</th>
      <th class="check-box is_underline">U</th>
      <th width="10px"></th>
    </tr>
  </thead>

  <tbody ui-sortable="sortable_options" ng-model="scopes_filtered"
         ng-style="{ 'background-color': Color.parse(Theme.bg.color), 'color': Color.parse(Theme.fg.color) }">

    <tr ng-repeat="rule in scopes_filtered"
        ng-click="mark_as_selected(rule)"
        ng-class="{ 'selected': rule == selected_rule, 'hovered': rule == Editor.ScopeHunter.hovered_rule, 'hide': !rule.scope }"
        class="rule-{{$index}}">

      <td class="name-box"
          ng-dblclick="EditPopover.show(rule, $index)"
          ng-style="{ 'color': Color.parse(rule.settings.foreground), 'background-color': Color.parse(rule.settings.background) }"
          ng-class="{
            'is_italic' : Theme.is_font_style('italic', rule),
            'is_bold': Theme.is_font_style('bold', rule),
            'is_underline': Theme.is_font_style('underline', rule)
          }">
          <span class="truncate">{{ rule.name || rule.scope }}</span>
      </td>

      <td class="color-box">
          <div class="colorpicker-box"
               ng-click="CP.pick(rule.settings, 'foreground')"
               ng-class="{ 'has_color': Color.is_color(rule.settings.foreground) }"
               ng-style="{ 'background-color': Color.parse(rule.settings.foreground), 'border-color': Theme.border_color() }"></div>
      </td>

      <td class="color-box">
          <div class="colorpicker-box"
               ng-click="CP.pick(rule.settings, 'background')"
               ng-class="{ 'has_color': Color.is_color(rule.settings.background) }"
               ng-style="{ 'background-color': Color.parse(rule.settings.background), 'border-color': Theme.border_color() }"></div>
      </td>

      <td class="check-box"><input type="checkbox" ng-checked="Theme.is_font_style('bold', rule)"      ng-click="Theme.toggle_font_style('bold',rule)"     ></td>
      <td class="check-box"><input type="checkbox" ng-checked="Theme.is_font_style('italic', rule)"    ng-click="Theme.toggle_font_style('italic',rule)"   ></td>
      <td class="check-box"><input type="checkbox" ng-checked="Theme.is_font_style('underline', rule)" ng-click="Theme.toggle_font_style('underline',rule)"></td>
      <td></td>
    </tr>
  </tbody>
</table>
